<template>
  <a-drawer
    :width="500"
    placement="right"
    :visible="props.visible"
    @close="onClose"
    :title="!formState.id ? '新增角色' : '编辑角色'"
  >
    <a-form
      ref="roleFormRef"
      :model="formState"
      name="basic"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
      autocomplete="off"
    >
      <a-form-item
        label="角色名称"
        name="title"
        :rules="[{ required: true, message: '请输入角色名称' }]"
      >
        <a-input v-model:value="formState.title" placeholder="请输入角色名称" />
      </a-form-item>
      <a-form-item
        label="角色标识"
        name="role"
        :rules="[{ required: true, message: '请输入角色标识' }]"
      >
        <a-input v-model:value="formState.role" placeholder="请输入角色标识" />
      </a-form-item>
      <a-form-item label="角色状态" name="status">
        <a-switch
          :checked="formState.status == '1'"
          checked-children="启用"
          un-checked-children="禁用"
          @change="onChangeRoleStatus"
        />
      </a-form-item>
      <a-form-item label="角色描述" name="description">
        <a-textarea
          v-model:value="formState.description"
          placeholder="请输入角色描述"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>
      <a-form-item label="角色权限" name="permissions">
        <a-tree checkable :tree-data="sysMenuList" :fieldNames="fieldNames">
        </a-tree>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button
        type="reset"
        @click="onReset"
        :style="{
          'margin-right': '16px',
        }"
        >重置</a-button
      >
      <a-button type="primary" @click="onFinish">提交</a-button>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { ISysRole, ISysMenu } from "@/type/System";
import { FormInstance, message, TreeProps } from "ant-design-vue";
import cloneDeep from "lodash/cloneDeep";
import Api from "@/service/systemService";

let emit = defineEmits(["update:visible"]);
const roleFormRef = ref<FormInstance>();
const formState = ref<ISysRole>({
  id: "",
  title: "",
  role: "",
  status: "1",
  description: "",
  createtime: "",
  permissions: [],
});
const props = defineProps<{
  visible: Boolean;
  role: ISysRole | null;
}>();
const sysMenuList = ref<ISysMenu[]>([]);
const fieldNames: TreeProps["fieldNames"] = {
  key: "id",
};

const onFinish = () => {
  roleFormRef.value.validateFields().then(() => {
    message.success({
      content: "成功新增/编辑角色",
    });
    emit("update:visible");
  });
};
const onReset = () => {
  roleFormRef.value.resetFields();
};
const onClose = () => {
  emit("update:visible");
};
const onChangeRoleStatus = () => {
  formState.value.status = formState.value.status === "1" ? "0" : "1";
};
const getSysMenu = async () => {
  const res = await Api.getMenuRight();
  sysMenuList.value = res;
};
onMounted(() => {
  getSysMenu();
});
watch(
  () => props.role,
  (newVal) => {
    if (newVal) {
      formState.value = cloneDeep(newVal);
      return;
    }
    formState.value = {
      id: "",
      title: "",
      role: "",
      status: "1",
      description: "",
      createtime: "",
      permissions: [],
    };
  }
);
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
